<template>
<div class="articles">
    <div class="site-content animate">
        <main class="site-main">
            <article class="hentry">
                <!-- 文章头部 -->
                <header class="entry-header">
                    <!-- 标题输出 -->
                    <h1 class="entry-title">{{article.title}}</h1>
                    <hr>
                    <div class="breadcrumbs">
                        <div id="crumbs">最后更新时间：{{article.updateTime}}</div>
                    </div>
                </header>
                <!-- 正文输出 -->
                <div class="entry-content">
                    <mavon-editor class="md" :value="article.content" :subfield="false" :defaultOpen="'preview'" :toolbarsFlag="false" :editable="false" :scrollStyle="true" :ishljs="true" />

                </div>
                <!-- 文章底部 -->
                <section-title>
                    <footer class="post-footer">
                        <!-- 阅读次数 -->
                        <div class="post-like">
                            <i class="iconfont iconeyes"></i>
                            <span class="count">{{article.viewsCount}}</span>
                        </div>
                        <!-- 文章分类 -->
                        <div class="post-tags">
                            <i class="iconfont iconcategory"></i>
                            <div v-for="item in article.category" :key="item" class="tag-item">
                                <router-link :to="`/category/${item}`">{{item}}</router-link>
                            </div>

                            <!-- to前加：使其变成v-bind属性，可以v-bind属性里边编写js代码 -->
                            <!-- <router-link :to="`/category/${article.category}`">{{article.category}}</router-link>-->
                        </div>
                    </footer>
                </section-title>

                <!--声明-->
                <div class="open-message">
                    <p>声明：Gblog博客|版权所有，违者必究|如未注明，均为原创|本网站采用<a href="https://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">BY-NC-SA</a>协议进行授权</p>
                    <p>转载：转载请注明原文链接 - <a :href="url">{{url}}</a></p>
                </div>
                <div>
                    <comment-message-editor @submit="submitComment"></comment-message-editor>
                    <!-- buttonText="发布评论" -->
                </div>
                <!--评论-->
                <div class="comments">
                    <comment v-for="item in comments" :key="item.comment.id" :comment="item.comment">
                        <template v-if="item.reply.length">
                            <comment v-for="reply in item.reply" :key="reply.id" :comment="reply"></comment>
                        </template>
                    </comment>
                </div>
            </article>
        </main>
    </div>
</div>
</template>

<script>
import sectionTitle from "@/components/section-title";
import comment from "@/components/comment";
import commentMessageEditor from "comment-message-editor";
import {
    fetchComment,
    view,
    submitReply,
    getCodeImg
} from "../api";
export default {
    name: "articles",
    data() {
        return {
            codeUrl: "",
            postId: null,
            showDonate: false,
            comments: [],
            article: {},
            commentForm: {
                id: "",
                comment: "",
                postId: "",
            },
            url: ""
        };
    },
    components: {
        sectionTitle,
        comment,
        commentMessageEditor
    },
    created() {
        this.postId = this.$route.params.id; // 123
        this.getArticle();
        this.getComment();
    },
    mounted() {
        this.url = window.location.href;
    },

    methods: {
        getComment() {
            fetchComment({
                    postId: this.postId
                })
                .then(res => {
                    this.comments = res.data || [];
                })
                .catch(err => {
                    console.log(err);
                });
        },
        getArticle() {
            view({
                    id: this.postId
                })
                .then(res => {
                    this.article = res.data;
                })
                .catch(err => {
                    console.log(err);
                });
        },
        submitComment(v) {
            this.commentForm.postId = this.postId;
            this.commentForm.comment = v;

            submitReply(this.commentForm)
                .then(res => {
                    this.$notify({
                        title: "成功",
                        message: res.msg,
                        type: "success"
                    });
                    this.getComment();
                })
                .catch();

        }
    }
};
</script>

<style lang="less" scoped>
.site-content {
    .site-main {
        padding: 80px 0 0 0;
    }
}

article.hentry {
    .entry-header {
        .entry-title {
            font-size: 23px;
            font-weight: 600;
            color: #737373;
            margin: 0.67em 0;

            &:before {
                margin-right: 6px;
                color: #d82e16;
                font-size: 20px;
                font-weight: 600;
            }
        }

        hr {
            height: 1px;
            border: 0;
            background: #efefef;
            margin: 15px 0;
        }

        .breadcrumbs {
            font-size: 14px;
            color: #d2d2d2;
            text-decoration: none;
            margin-bottom: 30px;
        }
    }

    footer.post-footer {
        width: 100%;
        padding: 20px 10px;
        margin-top: 30px;
        height: 65px;
        position: relative;

        i {
            font-size: 18px;
            margin-right: 5px;
        }

        .post-like {
            float: right;
            margin: 7px 0 0 20px;
        }

        .post-share {
            float: right;
            list-style: none;
            margin-right: 20px;
        }

        .donate {
            float: left;
            line-height: 36px;
            border-radius: 100%;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border: 1px solid #2b2b2b;

            &:hover {
                border: 1px solid goldenrod;

                span {
                    color: goldenrod;
                }
            }

            span {
                color: #2b2b2b;
                padding: 10px;
                position: relative;
                cursor: pointer;
            }
        }

        .post-tags {
            margin: 7px 0 0 20px;

            text-transform: uppercase;
            list-style: none;
            display: inline-block;

            a:hover {
                color: #ff6d6d;
            }

            .iconfont {
                float: left;
            }

            .tag-item {
                margin-left: 10px;
            }

            div {
                float: left;
            }
        }
    }

    .open-message {
        margin: 50px 0;
        position: relative;
        background: #2b2b2b;
        padding: 10px 30px;
        border-radius: 3px;
        font-size: 14px;
        color: #fff;

        &:after {
            content: "";
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #2b2b2b;
            position: absolute;
            top: -8px;
            left: 48%;
        }

        p {
            margin: 10px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        a {
            color: #a0dad0;
            padding: 0 5px;
        }
    }
}
</style>
